<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bili1.css">
    <link rel="stylesheet" href="css/bili2.css">
    <meta name="referrer" content="no-referrer">
    <style type="text/css">li[data-v-6db3c9b8] {
        list-style: none;
        color: #222;
    }
    a[data-v-6db3c9b8] {
        text-decoration: none;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
    }
    .nav-item[data-v-6db3c9b8] {
        float: left;
        text-align: center;
        /*line-height: 42px;*/
        /*height: 42px;*/
        position: relative;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
    .t[data-v-6db3c9b8] {
        color: inherit;
        height: 100%;
        display: block;
    }
    .bp-red-point[data-v-6db3c9b8] {
        height: 6px;
        width: 6px;
        border-radius: 100%;
        position: absolute;
        top: -2px;
        right: -5px;
        /*left: 20px;*/
        background-color: #FA5A57;
    }
    .num[data-v-6db3c9b8] {
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        border-radius: 8px;
        line-height: 16px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        position: absolute;
        top: -7px;
        right: -10px;
        /*left: 20px;*/
        z-index: 30;
        background-color: #FA5A57;
    }
    .slide-fade-enter-active[data-v-6db3c9b8] {
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    .slide-fade-leave-active[data-v-6db3c9b8] {
        -webkit-transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
        transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
    }
    .slide-fade-enter[data-v-6db3c9b8],
    .slide-fade-leave-to[data-v-6db3c9b8] {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
        opacity: 0;
    }
    .i-frame[data-v-6db3c9b8] {
        position: absolute;
        width: 382px;
        height: 540px;
        top: 100% !important;
        left: 0 !important;
        left: calc(50% -  191px) !important;
        background: transparent;
        /*box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px;*/
        border-radius: 2px;
        overflow: hidden;
        text-align: center;
        padding-top: 12px;
    }
    .i-frame[data-v-6db3c9b8]::before {
        content: '';
        width: 10px;
        height: 10px;
        display: block;
        position: absolute;
        top: 9px;
        left: calc(50% -  5px) !important;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: white;
        -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
        z-index: 1;
    }
    .i-frame iframe[data-v-6db3c9b8] {
        display: inline-block;
        overflow: hidden;
        width: 100%;
        height: 528px;
        /*padding: 0 10px 10px;*/
        background: transparent;
    }
    .bp-dynamic-header-icon[data-v-6db3c9b8] {
        display: inline-block;
        width: 28px;
        height: 100%;
    }
    </style>
    <style type="text/css">li[data-v-01c9e08c] {
        list-style: none;
        color: #222;
    }
    ul[data-v-01c9e08c] {
        padding: 0;
        margin: 0;
    }
    a[data-v-01c9e08c] {
        text-decoration: none;
        -webkit-transition: color 0.2s;
        transition: color 0.2s;
    }
    .nav-item[data-v-01c9e08c] {
        float: left;
        text-align: center;
        /*line-height: 42px;*/
        /*height: 42px;*/
        position: relative;
        background-color: rgba(255, 255, 255, 0);
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
    .nav-item *[data-v-01c9e08c] {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .t[data-v-01c9e08c] {
        color: inherit;
        height: 100%;
        display: block;
        /*padding: 0 11px;*/
    }
    .num[data-v-01c9e08c] {
        min-width: 16px;
        height: 16px;
        padding: 0 3px;
        border-radius: 8px;
        line-height: 16px;
        font-size: 12px;
        text-align: center;
        color: #fff;
        position: absolute;
        top: -7px;
        right: -10px;
        /*left: 20px;*/
        z-index: 30;
        background-color: #FA5A57;
    }
    .red_point[data-v-01c9e08c] {
        height: 6px;
        width: 6px;
        border-radius: 100%;
        position: absolute;
        top: -2px;
        right: -5px;
        /*left: 20px;*/
        background-color: #FA5A57;
    }
    .notify-float[data-v-01c9e08c] {
        position: absolute;
        width: 260px;
        top: 100% !important;
        left: 0 !important;
        left: calc(50% -  130px) !important;
        padding-top: 7px;
        white-space: nowrap;
        text-align: left;
        font-size: 14px;
        color: #212121;
    }
    .notify-float[data-v-01c9e08c]::before {
        content: '';
        width: 10px;
        height: 10px;
        display: block;
        position: absolute;
        top: 2px;
        left: calc(50% -  5px) !important;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: white;
        -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
        z-index: 1;
    }
    .notify-float .float_msg[data-v-01c9e08c] {
        background: #FFFFFF;
        -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        padding-left: 12px;
        position: relative;
        line-height: 30px;
    }
    .notify-float .float_msg > div[data-v-01c9e08c] {
        width: 100%;
        display: inline-block;
    }
    .notify-float .float_msg > div span[data-v-01c9e08c] {
        cursor: pointer;
        color: #00A1D6;
    }
    .notify-float .float_msg > i[data-v-01c9e08c] {
        position: absolute;
        top: 0;
        right: 15px;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 100%;
        background: url() center / contain no-repeat;
    }
    .notify-float .float_msg > i[data-v-01c9e08c]:hover {
        background-image: url();
    }
    .slide-fade-enter-active[data-v-01c9e08c] {
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    .slide-fade-leave-active[data-v-01c9e08c] {
        -webkit-transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
        transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
    }
    .slide-fade-enter[data-v-01c9e08c],
    .slide-fade-leave-to[data-v-01c9e08c] {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
        opacity: 0;
    }
    .i-frame[data-v-01c9e08c] {
        position: absolute;
        width: 172px;
        height: 205px;
        top: 100% !important;
        left: 0 !important;
        left: calc(50% -  86px) !important;
        padding-top: 12px;
    }
    .i-frame[data-v-01c9e08c]::before {
        content: '';
        width: 10px;
        height: 10px;
        display: block;
        position: absolute;
        top: 9px;
        left: calc(50% -  5px) !important;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: white;
        -webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.05);
        z-index: 1;
    }
    .i-frame iframe[data-v-01c9e08c] {
        background: #FFF;
        -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        width: 100%;
        height: 100%;
        height: calc(100% + 7px);
    }
    .bp-im-header-icon[data-v-01c9e08c] {
        display: inline-block;
        width: 28px;
        height: 100%;
    }
    </style>
    <style type="text/css">@font-face {
        font-family: "bili-footer-font";
        src: url(data:application/vnd.ms-fontobject;base64,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);
        /* IE9 */
        src: url(data:application/vnd.ms-fontobject;base64,nAoAANQJAAABAAIAAAAAAAIABQMAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAqgl/EgAAAAAAAAAAAAAAAAAAAAAAACAAYgBpAGwAaQAtAGYAbwBvAHQAZQByAC0AZgBvAG4AdAAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAAIABiAGkAbABpAC0AZgBvAG8AdABlAHIALQBmAG8AbgB0AAAAAAAAAQAAAAsAgAADADBHU1VCsP6z7QAAATgAAABCT1MvMj2SSUQAAAF8AAAAVmNtYXDP2j23AAAB5AAAAZRnbHlmcEahngAAA4QAAAMsaGVhZBYiSfcAAADgAAAANmhoZWEH3gOFAAAAvAAAACRobXR4EAAAAAAAAdQAAAAQbG9jYQJOAUIAAAN4AAAACm1heHABFgCAAAABGAAAACBuYW1lJ9Nd9wAABrAAAALNcG9zdJ35CLEAAAmAAAAAUgABAAADgP+AAFwEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAEn8Jql8PPPUACwQAAAAAANmBgv0AAAAA2YGC/QAA/4AEAAOAAAAACAACAAAAAAAAAAEAAAAEAHQACAAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQAAAAoAHgAsAAFERkxUAAgABAAAAAAAAAABAAAAAWxpZ2EACAAAAAEAAAABAAQABAAAAAEACAABAAYAAAABAAAAAAABBAABkAAFAAgCiQLMAAAAjwKJAswAAAHrADIBCAAAAgAFAwAAAAAAAAAAAAAAAAAAAAAAAAAAAABQZkVkAEDnHOdSA4D/gABcA4AAgAAAAAEAAAAAAAAEAAAABAAAAAQAAAAEAAAAAAAABQAAAAMAAAAsAAAABAAAAWAAAQAAAAAAWgADAAEAAAAsAAMACgAAAWAABAAuAAAABgAEAAEAAucc51L//wAA5xznUf//AAAAAAABAAYABgAAAAEAAgADAAABBgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAAAAAAA0AAAAAAAAAAMAAOccAADnHAAAAAEAAOdRAADnUQAAAAIAAOdSAADnUgAAAAMAAAAAALgBQgGWAAAACAAA/4AEAAOAAAsAHQA0AEsAVwBgAGoAcwAABSYAJzYANxYAFwYAAzI3NTQmJw4BFBYXMx4BBxQWJyYGBz4BJyYGBw4BFx4BNz4BJyYnPgEXNDYzNS4BJyMiBhQWFzMeAQcVHgEyNgU2FhcWBgcGJicmNhc+AS4BDgEeATcyFgcOAiY0NgceAgYiJj4BAgDa/t8FBQEh2toBIQUF/t8XEAExIwgMDAgKFBMCDEkxTAIBCgsZPg5pZRwhuW94RyQaIwMKmwEDAmVMAwoQEAoUNDsHARAVEP6ITm0EAWVOTW0FAWVbKSsPQ1MrEEMtBQcCAQYGBwU0DBEBEhkSARGABQEh2toBIQUF/t/a2v7fAk8YByIxAQEMDwwBBR4SCAwhEiUFAzkSFwcKPbhNRjciLIYsGQUFTA4BAw1LZQIQFRABCE00BAoQEC8COjM0SQYEPDM0Sc0LOUcgFTlIH3IIBgMGAQULCAoBERoREhkRAAAHAAD/gAQAA4AACwAfAC8AOABBAEoAUwAABSYAJzYANxYAFwYAAT4BNzMuAScOAQceARcHNxY7ASYFPgE3LgEnDgEHHgEXMjcXATIWFAYiJj4BIzIWFAYiJjQ2BR4BFAYiJjQ2Jx4BFAYiJjQ2AgDa/t8FBQEh2toBIQUF/t/+3gJyVhIPgFxkiAMBMSwVWicpFQoBQiMoAQJtUVFtAgJtUSUgQf7tDhITGhQBEo4OEhMaExMBewsODhYODngLDw8WDg6ABQEh2toBIQUF/t/a2v7fAbBJYgJDWQICa1EwTRpHKgoWZxhBJkNZAgJZQ0RZAgsjAaYSGxISGxISGxISGxKeAQ0WDQ0WDQEBDRYNDRYNAAADAAD/gAQAA4AACwAjADMAAAEGAAcWABc2ADcmAAE2OwE1NDY7ATIWHQEzHgEPAQYiLwEuAQEUBiMhIiY9ATQ2MyEyFhUCANr+3wUFASHa2gEhBQX+3/5sBghRCgiSCApRDQgIrQUOBa0FAQGICwf+kgcLCwcBbggKA4AF/t/a2v7fBQUBIdraASH+NgaSCAoKCJIBFgmeBQWeBQ/++ggLCwgkCAoKCAAAABIA3gABAAAAAAAAABUAAAABAAAAAAABABAAFQABAAAAAAACAAcAJQABAAAAAAADABAALAABAAAAAAAEABAAPAABAAAAAAAFAAsATAABAAAAAAAGABAAVwABAAAAAAAKACsAZwABAAAAAAALABMAkgADAAEECQAAACoApQADAAEECQABACAAzwADAAEECQACAA4A7wADAAEECQADACAA/QADAAEECQAEACABHQADAAEECQAFABYBPQADAAEECQAGACABUwADAAEECQAKAFYBcwADAAEECQALACYByQpDcmVhdGVkIGJ5IGljb25mb250CmJpbGktZm9vdGVyLWZvbnRSZWd1bGFyYmlsaS1mb290ZXItZm9udGJpbGktZm9vdGVyLWZvbnRWZXJzaW9uIDEuMGJpbGktZm9vdGVyLWZvbnRHZW5lcmF0ZWQgYnkgc3ZnMnR0ZiBmcm9tIEZvbnRlbGxvIHByb2plY3QuaHR0cDovL2ZvbnRlbGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBiAGkAbABpAC0AZgBvAG8AdABlAHIALQBmAG8AbgB0AFIAZQBnAHUAbABhAHIAYgBpAGwAaQAtAGYAbwBvAHQAZQByAC0AZgBvAG4AdABiAGkAbABpAC0AZgBvAG8AdABlAHIALQBmAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABiAGkAbABpAC0AZgBvAG8AdABlAHIALQBmAG8AbgB0AEcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAAcwB2AGcAMgB0AHQAZgAgAGYAcgBvAG0AIABGAG8AbgB0AGUAbABsAG8AIABwAHIAbwBqAGUAYwB0AC4AaAB0AHQAcAA6AC8ALwBmAG8AbgB0AGUAbABsAG8ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQBAgEDAQQBBQAKaWNvbl93ZWlibwtpY29uX3dlY2hhdA1pY29uX2Rvd25sb2FkAAAAAA==#iefix) format('embedded-opentype'),  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATAAAsAAAAACdQAAAR0AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqGLIUiATYCJAMQCwoABCAFhU0HUht2CMgusG3YkxoBF/gbrP0AFlIgFwueh2P5flwmZtKB3S2qdJTio8ThTGcDOhxIDeWmd+BJ66GiVxObeGBiKUlohqQLmThMnTI1QeZf/5kSEKd+Js3zGIYgnVSttuHSZssA6VgNEDAAt0T+D46lfmIKnH26ZZVFgkcBFciiWzRIp7ZleHVxXcDZEBBVkgk2zT0GABUHGwmQDWeggCqm4SUkEZYHc/aMgRwJCIfz9B4APLq/Lz+QnwqgAhGALTfXTTSofdVv+0lt/zZwaiPg9mcCuP3AwADAIW2u5ZjUFw1cSTSPUWYEEORi7cv1PxSqL0eVBWcqVvzPkxSAJI6xY7HtFdckQzDry8JWZv2wBsNoXz8MsgA/yBJhffuwEMuCQkN91JjahwhQw1V9wgIoz1PrfencD9J1H74gEto/i1eutDk0+PaPMOf22js94dwaseca4XKR7kHnnar3FDu9pN2JQ49Hi82vdp3rbgQctwXOkd4hbrNrgGuM3+IlT171eFyX6jsXOIiV9Le67M5Gx+7Vu+bvWbt3vBDrnXR4N3u6+gHr3WUDdMdxfM3VWW9schX3QC5IIdkFu22NpJhXYt9LORy2lfP7k2uxa5LrPkBjdVniedJOHId266QLngCx2xsxYOX8EG1XF2NbifnMf4b5SN/k//3zGCEZJj1HSBB+YUivAKUyHqCf9T97gxVmBarOLiLYPZGQrHqf7XneUUmfjOyBmk4VW+LGZTTPqliVmKjuvsYXSqTmMbrRdHcoxf5rLiVKynvoZWpp+3HZPaGpLF9Kt/aU95CaKuqZv9jge4ddfs31sf2IXf4t9TGZo+UGjYTsQ+MtZYdApAoPVIHJPW3cQdg6miJhkF/9tIFDoB7OuZb08c/tcZpoHpTGpWkcdWxKSq0c1psG9oGEabthPWwId0v6VStou19gZFxEHha42BPGmZGJ6ze9CiFp48Cmf8gnegqAZhu5csVtUtV3uWp1mC7furQdv299o1+jtc2cgGpPyKLcE05U7Q5ZiiQApEKvobvP4wj/yq8q/EIOfdmn/3U3/O9kwDogTFtwfx9uzTZX+aD1WBaYHM3rHgwaUhAlfvgHjqw3fcgKtXNBpGlCUCFNMGmZSMdWQkDMKgSl6SCqz7B/TM5yRmI1gJ7tCETFQ1BJ32Aq/iIcVzQEFKuCoEr9IWo/sB4xptVtrEFgKJGhUfsExOl5C2vsIGLtnInLYnleZISsxKz9GMMYEyVkVZV+UssIVo63oLzs3Ox4C2NhhDG2sY415Isii1iBN6Nm/XyMycSjToEfxejF7A5R7CzPyWHzXilbz5sBZkLAoIgYNKTdBAhHj2fB2iYRhkkckyQrLeHryoQYuzS1H4bBGL43ilCzoTKJVhVZVTZeHpInW24LZIvEkq66lvtYjWWQTyRiISwBzwxpbmdimEiEh3TmrzYKQ0+UraNFqFO5HKobW1eSvUsy8xMRgeuAlTyQQCmUQTmIXoXcEeMYrp3Hg4i+gxJ92RVofpzFxFM0AA==') format('woff2'), url(data:font/woff;base64,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) format('woff'), url(data:font/ttf;base64,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) format('truetype'),  url(//s1.hdslb.com/bfs/seed/jinkela/footer-v2/images/iconfont.svg#bili-footer-font) format('svg');
        /* iOS 4.1- */
    }
    .bili-footer-font {
        font-family: "bili-footer-font" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .bili-footer-icon_weibo:before {
        content: "\E71C";
    }
    .bili-footer-icon_wechat:before {
        content: "\E751";
    }
    .bili-footer-icon_download:before {
        content: "\E752";
    }
    </style>
    <style type="text/css">body {
        margin: 0;
        padding: 0;
    }
    .international-footer {
        font: 12px "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
        position: relative;
        margin: 0;
        padding: 0;
        background-color: #f6f9fa;
        padding: 30px 0;
        min-width: 999px;
    }
    .international-footer ol,
    .international-footer ul {
        list-style: none;
    }
    .international-footer a {
        color: #212121;
        transition: color 0.3s;
    }
    .international-footer a:hover {
        text-decoration: none;
        color: #00a1d6;
    }
    .international-footer a {
        text-decoration: none;
    }
    .international-footer a:focus,
    .international-footer *:focus {
        outline: none;
    }
    .international-footer * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .international-footer .b-footer-wrap {
        max-width: 1630px;
        min-width: 999px;
        margin: 0 auto;
    }
    .international-footer .link-box {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
    }
    .international-footer .link-box .footer_left {
        flex: 4;
        display: flex;
        justify-content: space-between;
    }
    .international-footer .link-box .footer_right {
        flex: 1;
        display: flex;
        align-items: center;
    }
    .international-footer .link-box .link-item {
        flex: 2;
        padding-right: 40px;
        margin-right: 40px;
        border-right: 1px solid #eee;
    }
    .international-footer .link-box .link-item .bt {
        font-size: 16px;
        color: #999;
        display: block;
        height: 20px;
        margin-bottom: 20px;
    }
    .international-footer .link-box .link-item ul {
        height: 110px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .international-footer .link-box .link-item ul a {
        display: inline-block;
        margin-bottom: 10px;
        width: 50%;
        height: 20px;
        cursor: pointer;
    }
    .international-footer .link-box .link-item ul a:nth-child(4n) {
        margin-bottom: 0;
    }
    .international-footer .link-box .link-item.link-b {
        flex: 3;
    }
    .international-footer .link-box .link-item.link-b ul {
        height: 110px;
    }
    .international-footer .link-box .link-item.link-b ul a {
        width: 33.3333%;
    }
    .international-footer .link-box .link-item.link-c {
        padding-right: 0;
        border-right: none;
        margin-right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .international-footer .link-box .link-item.link-c .a-wraper {
        flex: 1;
        display: flex;
        min-width: 70px;
        justify-content: center;
        align-items: center;
    }
    .international-footer .link-box .link-item.link-c a {
        position: relative;
        display: inline-block;
        text-align: center;
        color: #212121;
    }
    .international-footer .link-box .link-item.link-c a:hover p {
        color: #00a1d6;
    }
    .international-footer .link-box .link-item.link-c a:hover .qrcode {
        display: block;
    }
    .international-footer .link-box .link-item.link-c a .qrcode {
        display: none;
        position: absolute;
        top: -125px;
        left: -25px;
        width: 117px;
        height: 117px;
        background: #fff;
        border: 1px solid #eee;
        padding: 10px;
        background-repeat: no-repeat;
        background-position: center;
    }
    .international-footer .link-box .link-item.link-c a.biliapp .qrcode {
        background-image: url(//s1.hdslb.com/bfs/seed/jinkela/footer-v2/images/biliapp_qrcode.png);
    }
    .international-footer .link-box .link-item.link-c a.weibo .qrcode {
        background-image: url(//s1.hdslb.com/bfs/seed/jinkela/footer-v2/images/weibo_qrcode.png);
    }
    .international-footer .link-box .link-item.link-c a.weixin .qrcode {
        width: 241px;
        left: -185px;
        height: 143px;
        top: -151px;
        background-image: url(//s1.hdslb.com/bfs/seed/jinkela/footer-v2/images/weixin_qrcode.gif);
    }
    .international-footer .link-box .link-item.link-c a.weixin:hover p {
        color: #212121;
    }
    .international-footer .link-box .link-item.link-c p {
        margin-top: 10px;
        color: #212121;
        height: 20px;
        transition: color 0.2s;
    }
    .international-footer .link-box .link-item.link-c .bili-footer-font {
        font-size: 50px;
    }
    .international-footer .link-box .link-item.link-c .biliapp {
        color: #585f69;
    }
    .international-footer .link-box .link-item.link-c .weibo {
        color: #fe596c;
    }
    .international-footer .link-box .link-item.link-c .weixin {
        color: #42c86b;
    }
    .international-footer .partner {
        display: flex;
        padding-top: 30px;
        color: #999;
    }
    .international-footer .partner .pic-box {
        width: 100px;
        margin-right: 20px;
    }
    .international-footer .partner .pic {
        width: 96px;
        height: 75px;
    }
    .international-footer .partner .pic962110 {
        margin: 5px 0;
    }
    .international-footer .partner p {
        line-height: 24px;
    }
    .international-footer .partner a {
        color: #999;
    }
    .international-footer .partner a:hover {
        color: #00a1d6;
    }
    .international-footer .partner .text-con {
        width: calc(100% - 120px);
    }
    .international-footer .partner .text-con span {
        margin-right: 15px;
        display: inline-block;
    }
    .international-footer .partner .sprite {
        display: inline-block;
        background-image: url(//s1.hdslb.com/bfs/seed/jinkela/footer-v2/images/hz_icon.png);
        background-repeat: no-repeat;
        vertical-align: middle;
        margin-right: 3px;
    }
    .international-footer .partner .sprite.bg1 {
        width: 16px;
        height: 16px;
        background-position: 0 -2px;
    }
    .international-footer .partner .sprite.bg2 {
        width: 18px;
        height: 20px;
        background-position: -41px 0px;
    }
    .international-footer .partner .sprite.bg3 {
        width: 16px;
        height: 16px;
        background-position: -18px -3px;
    }
    </style>



</head>
<body>

    <p id="likes" th:text="${likes}" hidden></p>
    <p id="tops" th:text="${tops}" hidden></p>
    <table></table>
    <button onclick="change()">刷新</button>
    <div class="rcmd-box-wrap">
        <div class="rcmd-box" id="items">


        </div><!---->
        <div class="change-btn"><i class="bilifont bili-icon_caozuo_huanyihuan"></i><span>换一换</span></div><!----><!---->
    </div>
</body>

<script src="js/jquery.js"></script>
<script>
    let likes = $("#likes").text();
    let likeJson = JSON.parse(likes);
    let tops = $("#tops").text();
    let topJson = JSON.parse(tops);
    var allItem = new Array;
    var lastItem = new Array;
    for (var topsKey in likeJson) {
        var t = likeJson[topsKey];
        for (var item in t) {
            allItem.push(t[item]);
        }

    }
    for (var item in topJson) {
        allItem.push(topJson[item]);
    }
    r(allItem);

    // 方法3
   function r(arr){
       arr.sort(function(){
           return Math.random()-0.5;
       });
        console.log(arr);
   }
   change();
    function change() {
        $("#items").html(" ")
        let _10 = get10();
        for (var item of _10) {
            var link = "https://www.bilibili.com/video/"
            if(typeof item.bvid == "undefined"){
                link += "av"+item.aid
            }else {
                link += item.bvid
            }
            var name;
            if(typeof item.owner == "undefined"){
                name = item.author
            }else {
                name = item.owner.name
            }
            var desc
            if(typeof item.description == "undefined"){
                desc = item.dynamic
            }else {
                desc = item.description
            }
            $("#items").html($("#items").html()+"<div class=\"video-card-reco\">\n" +
                "                <div class=\"info-box\"><a\n" +
                "                        href="+link+"\n" +
                "                        target=\"_blank\"><img\n" +
                "                        src="+item.pic+"\n" +
                "                        alt="+desc+">\n" +
                "                    <div class=\"info\"><p title="+item.title+" class=\"title\">\n" +
                "                        "+item.title+"</p>\n" +
                "                        <p class=\"up\"><i class=\"bilifont bili-icon_xinxi_UPzhu\"></i>"+name+"</p>\n" +
                "                        <p class=\"play\">不知道多少播放</p></div>\n" +
                "                </a></div>\n" +
                "                <div class=\"watch-later-video van-watchlater black\"><span class=\"wl-tips\"\n" +
                "                                                                          style=\"left: -21px; display: none;\"></span>\n" +
                "                </div>\n" +
                "            </div>")
        }
        
    }


    function get10(){
       if(allItem.length<10){
           lastItem.concat(allItem);
           allItem.splice(0);
           allItem.concat(lastItem);
           lastItem.splice(0);
       }
       var z = allItem.splice(0,10);
        lastItem.concat(z);
       return z;


    }

    console.log(likeJson)
    console.log(topJson)
    console.log(tops)
</script>

</html>